<template>
	<view>
		<view class="page-foot bg-white">
			<view class="flex-box plr30 pb30 fs28"  @click="agreeChange()">
				<image class="icon-check mr20" v-if="agreeStatus" src="/static/icon/icon_check-on.png" mode="aspectFit"></image>
				<image class="icon-check mr20"v-else src="/static/icon/icon_check.png" mode="aspectFit"></image>
				<view class="col5">我已阅读并同意</view>
				<view class="blue" @click.stop="agreePopOpen">《经纪人入驻协议》</view>
			</view>
			<view class="ptb10 m-hairline--top" @click="submitApply">
				<view class="g-btn3 mlrauto">确定提交</view>
			</view>
		</view>

		<view class="container plr30">
			<view class="row flex-box m-hairline--bottom">
				<view class="fs30 col89">姓名</view>
				<input class="flex-grow-1 fs30 col10 tr" v-model="formData.username" type="text" placeholder="请输入"></input>
			</view>
			<view class="row flex-box m-hairline--bottom">
				<view class="fs30 col89">手机号码</view>
				<input class="flex-grow-1 fs30 col10 tr" v-model="formData.mobile" type="number" placeholder="请输入"></input>
			</view>
			<view class="row flex-box m-hairline--bottom">
				<view class="fs30 col89">身份证号</view>
				<input class="flex-grow-1 fs30 col10 tr" v-model="formData.identify" type="idcard" placeholder="请输入"></input>
			</view>
			<view class="row m-hairline--bottom">
				<view class="fs30 col89 pb30 mb25">身份证</view>
				<view class="flex-box flex-between">
					<image class="icon-upload1" @click="chooseImage(1)" :src="formData.id_face ? formData.id_face :'/static/icon/icon_btn1.png'" mode="aspectFill"></image>
					<image class="icon-upload1" @click="chooseImage(2)" :src="formData.id_back?formData.id_back:'/static/icon/icon_btn2.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="flex-box row m-arrow-right" @click="addCommunity()" v-if="false">
				<view class="fs30 col89 ">选择负责小区</view>
			</view>
			<view class="xiaoqu flex-box m-hairline--bottom" v-for="(item,index) in chooseVillages" v-if="false">
				<view class="flex-grow-1">
					<view class="flex-box mb25">
						<view class="fs36 col10">{{item.name}}</view>
						<view class="fs24 red ml20" v-if="item.check_status == 0">审核中</view>
					</view>
					<view class="fs28 col89">{{item.prov}}{{item.city}}{{item.region}}{{item.street}}{{item.addr}}</view>
				</view>
				<view class="btn" @click="remove(index)">移除</view>
			</view>
		</view>
	
		<u-popup :show="agreePopShow" mode="center" round="20" @close="agreePopClose" @open="agreePopOpen">
			<view class="add-pop">
					<view class="fs32 tc col3 mb20">{{article.name}}</view>
					<view class="agreement mb30 fs28">
						<u-parse :content="article.content"></u-parse>
					</view>
					<view class="flex-box flex-center">
						<view class="foot-btn1" @click="agreePopClose">关闭</view>
						<view class="foot-btn2" @click="agreeChange2">确定</view>
					</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				agreeStatus:true,
				article:'',
				formData:{
					username:'',
					mobile:'',
					identify:'',
					id_face:'',
					id_back:'',
					village_ids:''
				},
				chooseVillages:[],
				agreePopShow: false
			}
		},
		onLoad() {
			let that = this;
			uni.$on("updateVillage",function(data){
				let village_ids = [];
				for(let i=0;i<data.length;i++){
					village_ids[i] = data[i].id;
				}
				that.formData.village_ids = village_ids.join(',');
				that.chooseVillages = data;
				//that.$forceUpdate()
			});
			that.initData();
		},
		methods: {
			agreePopOpen() {
				this.agreePopShow = true
			},
			agreePopClose() {
				this.agreePopShow = false
			},
			agreeChange2(){
				this.agreePopShow = false;
				this.agreeStatus = true;
			},
			initData() {
				var that = this;
				functions.getAjaxData('/api/xiluhouse.user/user_apply', {}, function (res) {
					if(res.data.is_broker == 2){
						uni.showModal({
							title:"提示",
							content:"您是经纪人，无需申请",
							success() {
								uni.navigateBack({})
							}
						})
					}else{
						let user_auth = res.data.user_auth;
						if(user_auth){
							if(user_auth.check_status == 0 && user_auth.is_broker == 2){
								uni.showModal({
									title:"提示",
									content: "您的经纪人申请正在审核中",
									success() {
										uni.navigateBack({})
									}
								})
							}else if(user_auth.check_status == 1 && user_auth.is_broker == 2 && res.data.is_broker == 2){
								uni.showModal({
									title:"提示",
									content:"您已是经纪人，不可申请",
									success() {
										uni.navigateBack({})
									}
								})
							}
						}
						
					}
					
				});
			
				
				functions.getAjaxData('/api/xiluhouse.article/article_detail', {id:53}, function (res) {
					that.article = res.data!=null?res.data:'';
				})
			
			},
			
			agreeChange(){
				this.agreeStatus = !this.agreeStatus
			},
			//图片上传
			chooseImage(type) {
				let that = this;
				functions.chooseImg(1,function(ret){
					if(type == 1){
						that.formData.id_face = ret.fullurl;
					}else if(type == 2){
						that.formData.id_back = ret.fullurl;
					}
				})
			},
			//选择小区
			addCommunity(){
				let village_ids = this.formData.village_ids;
				uni.navigateTo({
					url: '/pages/rental/apply_add_community/apply_add_community?village_ids='+village_ids
				})
			},
			// 提交申请
			submitApply() {
				var that = this;
				if(!that.agreeStatus){
					functions.toast("请先同意协议");
					return false;
				}
				functions.checkLogin(function (ret) {
					if (ret) {
						let form = that.formData;
						form['is_broker'] = 2;
						functions.submitAjaxData(
							that,
							'/api/xiluhouse.broker/apply',
							form,
							function (res) {
								functions.toast(res.msg);
								setTimeout(function(){
									uni.navigateBack({})
								},1500)
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			remove(index){
				let chooseVillages = this.chooseVillages;
				chooseVillages.splice(index,1);
				let village_ids = [];
				for(let i=0;i<chooseVillages.length;i++){
					village_ids[i] = chooseVillages[i].id;
				}
				this.formData.village_ids = village_ids.join(',');
				this.chooseVillages = chooseVillages;
			}
		}
	}
</script>

<style lang="less" scoped>
	.xiaoqu {
		padding: 50rpx 0 30rpx;

		.btn {
			width: 110rpx;
			height: 55rpx;
			border-radius: 30rpx;
			border: 1px solid var(--normal);
			font-size: 24rpx;
			color: var(--normal);
			line-height: 54rpx;
			text-align: center;
		}
	}

	.page-foot~.container {
		padding-bottom: 200rpx;
	}

	.page-foot {
		.icon-check {
			display: block;
			width: 35rpx;
			height: 35rpx;
		}
	}

	.row {
		padding: 55rpx 0;
	}

	.icon-upload1 {
		display: block;
		width: 325rpx;
		height: 190rpx;
	}

	.icon-upload2 {
		display: block;
		width: 220rpx;
		height: 250rpx;
	}
	
	.add-pop {
		padding: 40rpx 40rpx 50rpx;
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.agreement{
			max-height: 40vh;
			overflow-y: scroll;
		}
		.foot-btn1 {
			margin: 0 20rpx;
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 1px solid #CCCCCC;
			font-size: 30rpx;
			color: #aaa;
			line-height: 80rpx;
			text-align: center;
		}
		
		.foot-btn2 {
			margin: 0 20rpx;
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--normal);
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>
